<template>
  <div>
    <selects class="select"></selects>
    <div class="container" style="width:85%;margin:0 auto">
      <div
        class="col-xs-12 col-sm-12 col-md-6 main"  v-for="(Activity ,index) in ActivityList" :key="index">
        <router-link :to="'/activity/'+Activity.id">
          <section>
            <div class="image">
              <img class="itemImage" :src="Activity.cover.url | imageHash" alt>
            </div>
            <div style="padding-top:10px">
            <p v-text="Activity.name" style="color:black"></p>
            <p style="color:#888">1月1日 07:30 - 1月1日 18:30</p>
            <span v-text="Activity.address" style="color:#888"></span>
            <span v-text="Activity.priceRange" style="font-size: 14px;color: #C16531;"></span>
         </div>
          </section>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  import selects from "../components/select"
  export default {
    data: function () {
      return {
        ActivityList: [],
        //获取数据  默认加载20条数据
        ActivityLength: 0,
        //是否加载更多
        loadingMore: false
      }
    },
    components:{
      selects
    },
    mounted() {
      this.getActivity();
      // this.didscroll();
      window.onscroll = this.didscroll;
    },
    methods: {
      getActivity() {
        var _this = this;
        var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
        axios
          .get(
            API_Proxy +
            "http://www.songguolife.com/api/activity?page=" + this.ActivityLength + "&pageSize=20")
          .then(
            function (data) {
              console.log("请求成功");
              // console.log(data);
              _this.ActivityList = data.data;
              // console.log(_this.ActivityList);
            },
            function (err) {
              console.log("请求失败");
              console.log(err);
            }
          );
      },
      didscroll() {
        //首先获取页面的高度
        var scorllTop = document.documentElement.scrollTop;
        //获取内容高度
        var contentHeight = document.body.clientHeight;
        //获取当前屏幕高度
        var windowHeight = window.innerHeight;
        if (scorllTop + windowHeight > contentHeight - 60) {
          //滚动条已经到最下方  而且现在没有再加载更多的内容
          if (this.loadingMore == false) {
            this.loadMorde();
          }
        }
      },
      //加载更多
      loadMorde: function () {
        this.loadingMore = true;
        this.ActivityLength += 1;
        var _this = this;
        var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
        axios.get( API_Proxy +
            "http://www.songguolife.com/api/activity?page=" +
            this.ActivityLength +
            "&pageSize=20")
          .then(function (data) {
            _this.ActivityList = _this.ActivityList.concat(data.data);
            _this.loadingMore = false;
        });
      }
    },
  };
</script>
<style scoped>
  .main {
    display: flex;
    padding: 0;
    justify-content: space-between;
    padding: 0 40px;
    margin-top: 80px;
  }

  .main section {
    width: 100%;
    height: 560px;
    padding: 0;
    margin: 0 auto;
  }
  a{
    text-decoration: none;
  }
  .image {
    width: 100%;
    height: 450px;
  }

  .itemImage {
    width: 100%;
    height: 450px;
  }
  .select{
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 900;
  }
</style>
